<template>
    <div class="map-section">
        <div class="map-container">
            <Map 
                ref="mapRef"
                :initial-center="[116.397428, 39.90923]"
                :initial-zoom="11"
                :map-height="'300px'"
                :circle-radius="200"
                :dynamic-circle-size="true"
                :circle-stroke-color="'#FF0000'"
                :circle-fill-color="'#FFA500'"
                :circle-stroke-opacity="0.8"
                :circle-fill-opacity="0.3"
                @location-updated="handleLocationUpdated"
                @location-clicked="handleLocationClicked"
                @search-completed="handleSearchCompleted"
                @error="handleError"
            />
        </div>
        
        <div class="selected-location" v-if="selectedLocation">
            <div class="location-info">
                <van-icon name="location-o" class="location-icon" />
                <div class="location-details">
                    <div class="location-name">{{ selectedLocation.name }}</div>
                    <div class="location-address">{{ selectedLocation.address }}</div>
                    <div class="location-coordinates">
                        经度: {{ selectedLocation.location.lng }} / 纬度: {{ selectedLocation.location.lat }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import Map from '@/Pages/compontents/Map.vue';
import { Icon as VanIcon } from 'vant';

const mapRef = ref(null);
const selectedLocation = ref(null);

// 处理位置更新事件
const handleLocationUpdated = (location) => {
    console.log('位置已更新:', location);
};

// 处理位置点击事件
const handleLocationClicked = (location) => {
    console.log('位置已点击:', location);
    
    if (!location || typeof location.lng !== 'number' || typeof location.lat !== 'number') {
        console.error('无效的位置数据:', location);
        return;
    }
    
    if (location.name && location.address) {
        selectedLocation.value = {
            name: location.name,
            address: location.address,
            location: {
                lng: Number(location.lng),
                lat: Number(location.lat)
            }
        };
        emits('update:location', selectedLocation.value);
    } else {
        if (mapRef.value) {
            mapRef.value.geocodeLocation(Number(location.lng), Number(location.lat))
                .then(result => {
                    if (result) {
                        console.log('地理编码结果:', result);
                        selectedLocation.value = {
                            ...result,
                            location: {
                                lng: Number(location.lng),
                                lat: Number(location.lat)
                            }
                        };
                        emits('update:location', selectedLocation.value);
                    }
                })
                .catch(error => {
                    console.error('地理编码查询失败:', error);
                    selectedLocation.value = {
                        name: '点击位置',
                        address: '地图上点击的位置',
                        location: {
                            lng: Number(location.lng),
                            lat: Number(location.lat)
                        }
                    };
                    emits('update:location', selectedLocation.value);
                });
        }
    }
};

// 处理搜索完成事件
const handleSearchCompleted = (result) => {
    console.log('搜索完成:', result);
    selectedLocation.value = result;
    emits('update:location', selectedLocation.value);
};

// 处理错误事件
const handleError = (error) => {
    console.error('地图错误:', error);
};

const emits = defineEmits(['update:location']);

defineExpose({
    selectedLocation
});
</script>

<style scoped>
.map-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.map-container {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.selected-location {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid #eee;
}

.location-info {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.location-icon {
    font-size: 20px;
    color: #1E9FFF;
    margin-top: 2px;
}

.location-details {
    flex: 1;
}

.location-name {
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.location-address {
    color: #666;
    font-size: 14px;
    margin-bottom: 4px;
}

.location-coordinates {
    color: #999;
    font-size: 12px;
}
</style>
